<!--
  ~ Copyright [2021-2021] [ahoo wang <ahoowang@qq.com> (https://github.com/Ahoo-Wang)].
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div nz-row [nzGutter]="8" class="content-header">
  <div nz-col [nzOffset]="15" [nzSpan]="3">
    <button nz-button nzType="primary" nzSize="large" (click)="openEditConfig()" nzBlock>
      <i nz-icon nzType="file-add"></i>Add
    </button>
  </div>
  <div nz-col [nzSpan]="3">
    <button nz-button nzType="primary" nzSize="large" (click)="openImportConfig()" nzDanger nzBlock>
      <i nz-icon nzType="import"></i>Import
    </button>
  </div>
  <div nz-col [nzSpan]="3">
    <a nz-button nzType="danger" nzSize="large" [href]="exportUrl" nzDanger nzBlock>
      <i nz-icon nzType="export"></i>Export
    </a>
  </div>
</div>

<nz-table class="content-body" #basicTable [nzBordered]="true" [nzData]="displayConfigs" nzShowSizeChanger
          [nzPageSizeOptions]="[10,20,30,50,100]">
  <thead>
  <tr>
    <th>Config Id
      <nz-filter-trigger [(nzVisible)]="searchVisible" [nzActive]="searchValue.length > 0"
                         [nzDropdownMenu]="searchMenu">
        <i nz-icon nzType="search"></i>
      </nz-filter-trigger>
    </th>
    <th>Action</th>
    <th>Expand all versions</th>
  </tr>
  </thead>
  <tbody>
  <ng-template ngFor let-config [ngForOf]="basicTable.data">
    <tr>
      <td>{{config.data}}</td>
      <td>
        <nz-button-group>
          <button
            nz-popconfirm
            [nzPopconfirmTitle]="'Are you sure delete this config?'"
            nzPopconfirmPlacement="top"
            nzType="dashed"
            nz-button
            (nzOnConfirm)="removeConfig(config.data)"
            nzDanger
          >
            <i nz-icon nzType="delete" nzTheme="outline"></i>
          </button>
          <button
            nz-button
            (click)="openEditConfig(config.data)"
          >
            <i nz-icon nzType="edit" nzTheme="outline"></i>
          </button>
        </nz-button-group>
      </td>
      <td [(nzExpand)]="config.expand"></td>
    </tr>
    <ng-template [ngIf]="config.expand">
      <tr [nzExpand]="config.expand">
        <app-config-version-list [configId]="config.data"></app-config-version-list>
      </tr>
    </ng-template>
  </ng-template>
  </tbody>
</nz-table>

<nz-dropdown-menu #searchMenu="nzDropdownMenu">
  <div class="ant-table-filter-dropdown">
    <div class="search-box">
      <input type="text" nz-input [autofocus]="true" placeholder="Search name" [(ngModel)]="searchValue"
             (keyup.enter)="search()"/>
      <button nz-button nzSize="small" nzType="primary" (click)="search()" class="search-button">
        Search
      </button>
      <button nz-button nzSize="small" (click)="reset()">Reset</button>
    </div>
  </div>
</nz-dropdown-menu>
